<template>
  <v-container class="mt-10 d-flex justify-center" style="max-width: 1500px">
    <div
      v-if="boxListData"
      class="box-card"
      style=" margin: 0 auto;"
    >
         <img src="@/static/img/set/assault.png" alt="" />

    </div>
  </v-container>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs, computed } from "vue";
import ActivityCard from "@/components/activity-card/Index.vue";
import ActivityNotice from "@/components/activity-notice/Index.vue";
import BoxCard from "@/components/box-card/Index.vue";
import { useStore } from "@/store";

// import {activityList, boxList} from './data'
import BoxService from "@/services/BoxService";
import WelfareBoxService from "@/services/WelfareBoxService";
import _ from "lodash";
import {useRouter} from "vue-router";

export default defineComponent({
  name: "Csgo",
  components: {
    ActivityCard,
    ActivityNotice,
    BoxCard,
  },
  setup() {
    const router = useRouter();
    const store = useStore()
    store.dispatch("getRechargeWelfareBoxTypeId")
    
    const state = reactive({
      boxListData: [],
      recharge_welfare_box_type_id: computed(() => store.getters.rechargeWelfareBoxTypeId),
      rechargeWelfareboxList: [],
    });
    console.log('111',state)
    const getBoxList = async () => {
      const types = await getBoxAllType();

      const list: any[] = [];
      for(let i = 0; i < types.length; i++) {
        const item = types[i];
        if (item.id == state.recharge_welfare_box_type_id) {
          continue
        }
        const res = await BoxService.list({type_id: item.id, page: 1, page_size: 24});
        list.push({
          sort: item.sort,
          name: item.name,
          ...res.data.data,
        });
      };

      state.boxListData = _.sortBy(list, o => o.sort);
    };

    const getBoxAllType = async () => {
      const res = await BoxService.allType();
      return res.data.data;
    };

    onMounted(async() => {
      await getBoxList();
      await getRechargeWelfareBoxList();
    });

    async function getRechargeWelfareBoxList() {
      const resp = await WelfareBoxService.rechargeWelfareBoxList({
        disabled: 0,
        sorts: "+amount"
      })
      const { data: {list, total} } = resp.data
      console.log(list,'list')
      state.rechargeWelfareboxList = list
    }

    const currentChange = async (val) => {
      const res = await BoxService.list({
        page_size: state.page_size,
        page: val,
      });
      state.boxListData = res.data.data;
    };

    return {
      ...toRefs(state),
      currentChange,
      handleToHistory() {
        router.push("/csgo/history");
      },
    };
  },
});
</script>

<style lang="scss" scoped>

.box-card {

  .tip{
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: right;
    .tipBtn{
      cursor: pointer;
      font-weight: bold;
      font-size: 16px;
    }
  }
  .list-title {
    font-size: 21px;
    font-weight: 900;
    letter-spacing: 3px;
    color: #c6c4d8;
    position: relative;
    .title-arrow-left {
      border-left: 4px solid #ff4700;
      display: inline-block;
      border-top: 2px solid transparent;
      border-bottom: 2px solid transparent;
      position: relative;

      &::before{
        left: -3px;
        content: "";
        position: absolute;
        box-sizing: border-box;
        box-shadow: 0 0 10px 2px rgb(255 71 0 / 90%);        
      }
      &::after{
        right: 4px;
        box-sizing: border-box;
        background: linear-gradient(270deg,#ff4700,rgba(227,66,5,0));
        content: "";
        position: absolute;
        top: -1px;
        width: 44px;
        height: 2px;
        opacity: .19;
      }
    }
    .title-text {
      min-height: 27px;
      margin: 0 20px;
      display: inline-block;
      position: relative;
      text-align: center;
    }
    .title-arrow-right {
      border-right: 4px solid #ff4700;
      display: inline-block;
      border-top: 2px solid transparent;
      border-bottom: 2px solid transparent;
      position: relative;
      box-sizing: border-box;

      &::before{
        left: 3px;
        content: "";
        position: absolute;
        box-shadow: 0 0 10px 2px rgb(255 71 0 / 90%);
        box-sizing: border-box;        
      }
      &::after{
        left: 4px;
        background: linear-gradient(90deg,#ff4700,rgba(227,66,5,0));
        content: "";
        position: absolute;
        top: -1px;
        width: 44px;
        height: 2px;
        opacity: .19;
        box-sizing: border-box;        
      }
    }
  }
  .box-container {
    .box-list {
      .box-item {
        cursor: pointer;
        height: 100%;
        padding: 1rem;
        font-size: 1rem;
        color: #afafaf;

        &:hover {
        .img {
          -webkit-transform:scale(1.1);
          transform:scale(1.1);
        }
          .price {
            background-color: #7668cb;
          }
        }

        p {
          text-align: center;
          width: 100%;
          color: #afafaf;
          margin-top: 0.5rem;
        }

        .tag {
          position: absolute;
          top: 0;
          right: 0;
        }

        .price {
          cursor: pointer;
          display: inline-block;
          padding: 0.4rem 0.7rem;
          transform: translateX(-50%);
          position: relative;
          left: 50%;
          border-radius: 4px;
          font-size: 1.2rem;
          font-weight: 700;
          color: #fff;
          align-items: center;
          img {
            position: relative;
            top: 0.185rem;
            height: 1.25rem;
            margin-right: 3px;
          }
        }

        .img {
          position: relative;
          width: 100%;
          -webkit-transition: 0.6s;
          transition: 0.6s;

          img {
            width: 100%;
            position: relative;
            z-index: 1;
          }
        }
      }
    }
  }
}
</style>
